import React, { useState } from 'react';
import { Space, Table, Tag, Tabs } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import type { TabsProps } from 'antd';

import './Tables.scss'
interface props {

}
interface DataType {
  key: string;
  name: string;
  age: number;
  address: string;
  tags: string[];
}
function Tables(props: props) {


  //第一个切换的表单
  var [tableData, setTableData] = useState([
    {
      key: '1',
      name: '如何申请新的证件',
      age: 23,
      address: '个人办件',
      tags: ['nice', 'developer'],
      name1: '个人办件',
      name2: '2023-2-21 15:40',
      name3: '2023-2-21 15:41'
    },
    {
      key: '2',
      name: '如何变更新的证件',
      age: 32,
      address: 'New York No. 1 Lake Park',
      tags: ['nice', 'developer'],
      name1: '个人办件',
      name2: '2023-2-21 15:40',
      name3: '2023-2-21 15:41'
    },
    {
      key: '3',
      name: '合并企业如何申报',
      age: 32,
      address: 'New York No. 1 Lake Park',
      tags: ['nice', 'developer'],
      name1: '企业申请',
      name2: '2023-2-21 15:40',
      name3: '2023-2-21 15:41'
    },
    {
      key: '4',
      name: '账号如何注销',
      age: 32,
      address: 'New York No. 1 Lake Park',
      tags: ['nice', 'developer'],
      name1: '账户问题',
      name2: '2023-2-21 15:40',
      name3: '2023-2-21 15:41'
    },
    {
      key: '5',
      name: '咨询问题',
      age: 32,
      address: 'New York No. 1 Lake Park',
      tags: ['nice', 'developer'],
      name1: '其他',
      name2: '2023-2-21 15:40',
      name3: '2023-2-21 15:41'
    },
  ])



  const columns: ColumnsType<DataType> = [
    {
      title: '标题',
      dataIndex: 'name',
      key: 'name',
      // render: (text) => <a>{text}</a>,
    },
    {
      title: '类型',
      dataIndex: 'name1',
      key: 'name',
      // render: (text) => <a>{text}</a>,
    },
    {
      title: '提出时间',
      dataIndex: 'name2',
      key: 'name',
      // render: (text) => <a>{text}</a>,
    },
    {
      title: '指定时间',
      dataIndex: 'name3',
      key: 'name',
      // render: (text) => <a>{text}</a>,
    },]

  //第二个切换的表单
  var [tableData2, setTableData] = useState([
    {
      key: '1',
      name: '如何申请新的证件',
      age: 23,
      address: '个人办件',
      tags: ['nice', 'developer'],
      name1: '个人办件',
      name2: '2023-2-21 15:40',
      name3: '2023-2-21 15:41'
    },
    {
      key: '2',
      name: '账号如何注销',
      age: 32,
      address: 'New York No. 1 Lake Park',
      tags: ['nice', 'developer'],
      name1: '个人办件',
      name2: '2023-2-21 15:40',
      name3: '2023-2-21 15:41'
    },
    {
      key: '3',
      name: '如何变更新的证件',
      age: 32,
      address: 'New York No. 1 Lake Park',
      tags: ['nice', 'developer'],
      name1: '企业申请',
      name2: '2023-2-21 15:40',
      name3: '2023-2-21 15:41'
    },
    {
      key: '4',
      name: '账号如何注销',
      age: 32,
      address: 'New York No. 1 Lake Park',
      tags: ['nice', 'developer'],
      name1: '账户问题',
      name2: '2023-2-21 15:40',
      name3: '2023-2-21 15:41'
    },
    {
      key: '5',
      name: '咨询问题',
      age: 32,
      address: 'New York No. 1 Lake Park',
      tags: ['nice', 'developer'],
      name1: '其他',
      name2: '2023-2-21 15:40',
      name3: '2023-2-21 15:41'
    },
  ])

  const columns2: ColumnsType<DataType> = [
    {
      title: '标题',
      dataIndex: 'name',
      key: 'name',
      // render: (text) => <a>{text}</a>,
    },
    {
      title: '类型',
      dataIndex: 'name1',
      key: 'name',
      // render: (text) => <a>{text}</a>,
    },
    {
      title: '提出时间',
      dataIndex: 'name2',
      key: 'name',
      // render: (text) => <a>{text}</a>,
    },
    {
      title: '指定时间',
      dataIndex: 'name3',
      key: 'name',
      // render: (text) => <a>{text}</a>,
    },]


  //下面第一个表单
  var [tableData3, setTableData] = useState([
    {
      key: '1',
      name: '× × × × × ×',
      age: 23,
      address: 'New York No. 1 Lake Park1',
      tags: ['nice', 'developer'],
      name1: '陈欢喜',
      name2: '非常不满意',
      name3: '2023-2-21 15:41'
    },
    {
      key: '2',
      name: '× × × × × ×',
      age: 32,
      address: 'New York No. 1 Lake Park',
      tags: ['nice', 'developer'],
      name1: '× × ×',
      name2: '不满意',
      name3: '2023-2-21 15:41'
    },
    {
      key: '3',
      name: '× × × × × ×',
      age: 32,
      address: 'New York No. 1 Lake Park',
      tags: ['nice', 'developer'],
      name1: '× × ×',
      name2: '不满意',
      name3: '2023-2-21 15:41'
    },
    {
      key: '4',
      name: '× × × × × ×',
      age: 32,
      address: 'New York No. 1 Lake Park',
      tags: ['nice', 'developer'],
      name1: '× × ×',
      name2: '不满意',
      name3: '2023-2-21 15:41'
    },
    {
      key: '5',
      name: '× × × × × ×',
      age: 32,
      address: 'New York No. 1 Lake Park',
      tags: ['nice', 'developer'],
      name1: '× × ×',
      name2: '不满意',
      name3: '2023-2-21 15:41'
    },
  ])


  //
  const columns3: ColumnsType<DataType> = [
    {
      title: '评价事项',
      dataIndex: 'name',
      key: 'name',
      // render: (text) => <a>{text}</a>,
    },
    {
      title: '评价人',
      dataIndex: 'name1',
      key: 'name',
      // render: (text) => <a>{text}</a>,
    },
    {
      title: '评价结果',
      dataIndex: 'name2',
      key: 'name',
      // render: (text) => <a>{text}</a>,
    },
    {
      title: '评价时间',
      dataIndex: 'name3',
      key: 'name',
      // render: (text) => <a>{text}</a>,
    },]


  //下面第二个表格
  var [tableData4, setTableData] = useState([
    {
      key: '1',
      name: '× × × × × ×',
      age: 23,
      address: 'New York No. 1 Lake Park1',
      tags: ['nice', 'developer'],
      name1: '陈欢喜',
      name2: '非常不满意',
      name3: '2023-2-21 15:41'
    },
    {
      key: '2',
      name: '× × × × × ×',
      age: 32,
      address: 'New York No. 1 Lake Park',
      tags: ['nice', 'developer'],
      name1: '× × ×',
      name2: '不满意',
      name3: '2023-2-21 15:41'
    },
    {
      key: '3',
      name: '× × × × × ×',
      age: 32,
      address: 'New York No. 1 Lake Park',
      tags: ['nice', 'developer'],
      name1: '× × ×',
      name2: '不满意',
      name3: '2023-2-21 15:41'
    },
    {
      key: '4',
      name: '× × × × × ×',
      age: 32,
      address: 'New York No. 1 Lake Park',
      tags: ['nice', 'developer'],
      name1: '× × ×',
      name2: '不满意',
      name3: '2023-2-21 15:41'
    },
    {
      key: '5',
      name: '× × × × × ×',
      age: 32,
      address: 'New York No. 1 Lake Park',
      tags: ['nice', 'developer'],
      name1: '× × ×',
      name2: '不满意',
      name3: '2023-2-21 15:41'
    },
    {
      key: '5',
      name: '× × × × × ×',
      age: 32,
      address: 'New York No. 1 Lake Park',
      tags: ['nice', 'developer'],
      name1: '× × ×',
      name2: '不满意',
      name3: '2023-2-21 15:41'
    },
    {
      key: '5',
      name: '× × × × × ×',
      age: 32,
      address: 'New York No. 1 Lake Park',
      tags: ['nice', 'developer'],
      name1: '× × ×',
      name2: '不满意',
      name3: '2023-2-21 15:41'
    },
    {
      key: '5',
      name: '× × × × × ×',
      age: 32,
      address: 'New York No. 1 Lake Park',
      tags: ['nice', 'developer'],
      name1: '× × ×',
      name2: '不满意',
      name3: '2023-2-21 15:41'
    },
    {
      key: '5',
      name: '× × × × × ×',
      age: 32,
      address: 'New York No. 1 Lake Park',
      tags: ['nice', 'developer'],
      name1: '× × ×',
      name2: '不满意',
      name3: '2023-2-21 15:41'
    },
    {
      key: '5',
      name: '× × × × × ×',
      age: 32,
      address: 'New York No. 1 Lake Park',
      tags: ['nice', 'developer'],
      name1: '× × ×',
      name2: '不满意',
      name3: '2023-2-21 15:41'
    },
    {
      key: '5',
      name: '× × × × × ×',
      age: 32,
      address: 'New York No. 1 Lake Park',
      tags: ['nice', 'developer'],
      name1: '× × ×',
      name2: '不满意',
      name3: '2023-2-21 15:41'
    },
    {
      key: '5',
      name: '× × × × × ×',
      age: 32,
      address: 'New York No. 1 Lake Park',
      tags: ['nice', 'developer'],
      name1: '× × ×',
      name2: '不满意',
      name3: '2023-2-21 15:41'
    },
    {
      key: '5',
      name: '× × × × × ×',
      age: 32,
      address: 'New York No. 1 Lake Park',
      tags: ['nice', 'developer'],
      name1: '× × ×',
      name2: '不满意',
      name3: '2023-2-21 15:41'
    },
  ])



  const columns4: ColumnsType<DataType> = [
    {
      title: '办件名称',
      dataIndex: 'name',
      key: 'name',
      // render: (text) => <a>{text}</a>,
    },
    {
      title: '评价人',
      dataIndex: 'name1',
      key: 'name',
      // render: (text) => <a>{text}</a>,
    },
    {
      title: '评价结果',
      dataIndex: 'name2',
      key: 'name',
      // render: (text) => <a>{text}</a>,
    },
    {
      title: '评价时间',
      dataIndex: 'name3',
      key: 'name',
      // render: (text) => <a>{text}</a>,
    },]

  //最上面的切换
  const onChange = (key: string) => {
    console.log(key);
  };
  const items: TabsProps['items'] = [
    {
      key: '1',
      label: `咨询待回复`,
      children: <Table columns={columns} dataSource={tableData} />,
    },
    {
      key: '2',
      label: `投诉待回复`,
      children: <Table columns={columns2} dataSource={tableData2} />,
    },

  ];

  return (
    <div className='Tables_big'>
      <Tabs defaultActiveKey="1" items={items} onChange={onChange} />
      <div className='Tables_small'>
        <div className='Tables_small1'>
          <Table columns={columns3} dataSource={tableData3} />
        </div>
        <div className='Tables_small2'>
          <Table columns={columns4} dataSource={tableData4} />
        </div>



      </div>

    </div>
  );
}

export default Tables;